<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Path Drawing Utility</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Path Drawing Utility</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro" style="min-height: 184px;">
    <p>
        <img src="../assets/graphics/img/pathutility-capture.png" alt="Screen capture of Graphics path utility"  style="border: 1px solid #bfbfbf; float:right; height:149px; margin: 0 0 8px 8px; width:395px;"/>
        This simple utility helps you by generating code while you interactively
        draw graphic paths. This was used to draw the <a href="graphics-violin.html">violin example</a>.
    </p>
</div>

<div class="example newwindow">
    <a href="graphics-pathutility-example.html" target="_blank" class="button">
        View Example in New Window
    </a>
</div>

<h2>The Path Utility</h2>

<p>As you drag the pencil icon, corresponding graphics code is auto-generated.
This code can be copied and pasted into a graphics instance to reproduce 
the paths you created with the pencil.
</p>


<h2>Initial State</h2>
<p>When the utility window is loaded, its generated code is placed
in the text area control. The generated code assumes you will have a separate
page to paste it into. This separate page must contain the following code: 
A graphics container such as this,</p>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;</pre>

<p>CSS such as this,</p>
<pre class="code prettyprint">#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:400px;
}</pre>

and a YUI instance containing a <code>Graphics</code> object such as this.
<pre class="code prettyprint">YUI().use(&#x27;graphics&#x27;, function (Y) {

    var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
    &#x2F;&#x2F; generated code from the path utility goes here
    
});</pre>

<p>The utility generates pastable code for an <code>addShape</code> method that will
create and render a path. It generates some fill and stroke placeholder code.
You can change this to change the attributes of the fill and stroke
after it's pasted into your code.</p>
<p><Strong>Note:</strong>
As you draw paths with the pencil, they won't have these attributes, you'll 
only see thin, red lines for precision. The placeholder attibutes below will 
only show after you paste the code in your page.</p>
<pre class="code prettyprint">{
   type: &quot;path&quot;,
   stroke: {
       weight: 2,
       color: &quot;#00dd00&quot;
   },
   fill: {
       type: &quot;linear&quot;,
       stops: [
       {color: &quot;#cc0000&quot;, opacity: 1, offset: 0},
       {color: &quot;#00cc00&quot;, opacity: 0.3, offset: 0.8} &#x2F;&#x2F; Opacity of stops not available in IE
       ]
   }
}</pre>


<h2>LineTo (Drag Pencil)</h2>
<p>Drag the pencil icon. The <code>drag:end</code> event sets the lineTo XY value.</p>

<h2>MoveTo (Shift + Drag)</h2>
<p>Drag the pencil icon with the shift key down to move without drawing a line.</p>

<h2>CurveTo (Alt + Drag)</h2>
<p>Drag the pencil icon with the alt key down. This draws a curve and displays
two draggable control points. The curve adjusts while you drag the control points.
Clicking the pencil icon, or starting another line, finalizes the <code>curveTo</code>.</p>

<h2>New Path Object</h2>
<p>Crate a new path object with a new name by changing the name in the 
'Graphic Object Name' text input, then clicking the 'New' button.</p>

<h2>Trace an Image</h2>
<p>You can modify the CSS of #mygraphiccontainer to include an image background.
This will allow you to trace the contours of an image.</p>

<pre class="code prettyprint">#mygraphiccontainer {
    background: url(assets&#x2F;images&#x2F;my-dog.jpg);
}</pre>


<img src="../assets/graphics/img/my-dog.jpg" alt="Tracing a picture of my dog
with a Graphics path" width="652" height="268"/>

zooming the browser can be helpful in accuracy.

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to create a Graphic instance and add shapes.">
                                        <a href="graphics-simple.html">Basic Graphics Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to draw lines and polygons.">
                                        <a href="graphics-path.html">Basic Path</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create linear and radial gradient fills.">
                                        <a href="graphics-gradients.html">Create Gradient Fills</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add drag to a shape.">
                                        <a href="graphics-drag.html">Basic drag with graphic object</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to apply transforms to shape.">
                                        <a href="graphics-transforms.html">Using Transforms</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a custom shape with the Graphics module.">
                                        <a href="graphics-customshape.html">Custom Shape</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a realistic glass.">
                                        <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a violin.">
                                        <a href="graphics-violin.html">Complex Drawing: Violin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A helper utility for interactively composing path code.">
                                        <a href="graphics-pathutility.html">Path Drawing Utility</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
